<!--
 * @Date: 2021-09-07 10:45:28
 * @Author: 陶子
 * @LastEditTime: 2023-06-14 15:50:28
 * @FilePath: \jk_one-stop_pc\src\views\bigView\equipment\components\equipmentInfo.vue
 * @pageName: 这是--(设备现状)--组件
-->
<template>
  <div class="livenessRootWrap">
    <div class="livenessRoot">
      <div class="topBox">
        <div class="title-img">
          <div class="title-text">点巡检设备</div>
          <div class="title-num">{{ numFormat(infoObj.checkNum) }}</div>
        </div>
        <div class="title-center">
          <div class="title-text">设备总数</div>
          <div class="title-num">{{ numFormat(infoObj.deviceTotalNum) }}</div>
        </div>
        <div class="title-img">
          <div class="title-text">保养设备</div>
          <div class="title-num">{{ numFormat(infoObj.maintainNum) }}</div>
        </div>
      </div>
      <div class="topBox" style="margin-bottom:0.22rem">
        <div>
        </div>
        <div class="title-img">
          <div class="title-text">故障设备</div>
          <div class="title-num">{{ numFormat(infoObj.repairNum) }}</div>
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Echart from '@/common/echart'
import { numFormat, compareDate, subStrText } from '@/utils/util'
export default {
  components: { Echart },
  props: ['infoData'],
  data() {
    return {
      numFormat,
      infoObj: {},
    }
  },
  watch: {
    infoData: {
      handler(newVal, oldVal) {
        this.infoObj = newVal
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {},
}
</script>

<style scoped lang="less">
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.livenessRootWrap {
  width: 100%;
  height: 100%;
  background: url('~@/assets/img/screen-p4.png') no-repeat;
  background-size: 95% 80%;
  background-position: center;
  .title-text {
    font-size: 0.18rem;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
  }
  .title-num {
    font-size: 0.36rem;
    font-family: Alimama ShuHeiTi;
    font-weight: bold;
    line-height: 1;
    background-image: linear-gradient(to bottom, #ffffff 0%, #00c0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.livenessRoot {
  width: 100%;
  height: 100%;
  padding-top: 0.75rem;
  background: url('~@/assets/img/screen-p5.png') no-repeat;
  background-size: 69% 63%;
  background-position: 51% 26%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .topBox {
    height: 1.4rem;
    display: flex;
    justify-content: space-between;
    .title-img {
      width: 1.5rem;
      height: 100%;
      background: url('~@/assets/img/screen-p6.png') no-repeat;
      background-size: 100%;
      background-position: center bottom;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .title-center {
      text-align: center;
      padding-top: 0.2rem;
      .title-text {
        margin-bottom: 0.2rem;
      }
      .title-num {
        font-size: 0.5rem;
      }
    }
  }
}
</style>
